


<template>
  <!-- 工单列表 -->
  <div class="ticketsList">
    <serchForm
      :Form="financeForm"
      :FormLabel="financeFormLabel"
      @onSearch="onSearch"
    />
    <!-- <div class="function-box">
            <el-button class="visitBtn" @click="openImportTable"><i class="iconfont icon-daochu" />导出</el-button>
        </div> -->
    <forTableCom
      :bg="bg"
      :color="color"
      :idActive="idActive"
      :limit="pageSize"
      :page="pageNum"
      :tableData="financeTableData"
      :tableHeaderData="financeTableHeaderData"
      :total="totals"
      @handleChange="handleChange"
      @handleSelectionChange="handleSelectionChange"
      @updateLimit="updateLimit"
      @updatePage="updatePage"
      :billing="true"
      @billingBtn="handleCalculateCost"
    >
    </forTableCom>

  </div>
</template>
  
<script setup>
import { ref } from 'vue'
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { getselectOrderApi } from '@/api/tickets/index.js'
import { updateOrderCaiWuApi } from '@/api/finance/index.js'
import dayjs from 'dayjs'
const { proxy } = getCurrentInstance()
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 勾选激活行的背景色
const idActive = 'orderId'
// 存储勾选框的对象
let multipleSelection = ref([])


// 表单
let financeForm = ref(
  {
    orderDate: '',
    orderId: '',
    customerId: '',
    customerStore: '',
    creator: '',
    deptId: '',
    voucherStatusItem: ''
  }
)
// 表单数据标题
let financeFormLabel = ref([
  {
    name: 'orderDate',
    label: '单据日期',
    type: 'datetimerange'
  },
  {
    name: 'orderId',
    label: '单据编号',
  },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer'
  },
  {
    name: 'customerStore',
    label: '终端门店'
  },
  {
    name: 'creator',
    label: '制单人'
  },
  {
    name: 'deptId',
    label: '部门',
    type: 'department'
  },
  {
    name: 'voucherStatus',
    label: '凭证状态',
    type: 'voucherStatusItem'
  }
])
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}
// 表格表头数据
let financeTableHeaderData = ref([
  {
    prop: 'orderDate',
    label: '单据日期',
    width: 170,
    fixed: "fixed"
  },
  {
    prop: 'orderId',
    label: '单据编号',
    width: 200,

  },
  {
    prop: 'customerName',
    label: '客户名称',
    minwidth: 100
  },
  {
    prop: 'customerStore',
    label: '终端门店',
    minwidth: 100
  },
  {
    prop: 'totalOrderAmount',
    label: '总销售金额',
    minwidth: 100
  },

  {
    prop: 'actualTotalMaterial',
    label: '实际材料费',
    minwidth: 100
  },
  {
    prop: 'actualTotalInstall',
    label: '实际安装费',
    minwidth: 100
  },
  {
    prop: 'actualUrbanManagementFee',
    label: '实际城管费',
    minwidth: 100
  },
  {
    prop: 'tax',
    label: '税点',
  },
  {
    prop: 'commission',
    label: '提成',
  },

  {
    prop: 'reimbursementAmount',
    label: '报账金额',
    width: 160,

  },
  {
    prop: 'reimbursementDifference',
    label: '报账差异',
    width: 160,

  },
  {
    prop: 'billingAmount',
    label: '开票金额',
    width: 160,

  },
  {
    prop: 'billingDifference',
    label: '开票差异',
    width: 160,

  },
  {
    prop: 'paymentAmount',
    label: '回款金额',
    width: 160,

  },
  {
    prop: 'paymentDifference',
    label: '回款差异',
    width: 160,

  },
  {
    prop: 'remarkBilling',
    label: '备注',
    width: 200,
  },

])

// 表格数据内容
let financeTableData = ref([])


// 接口
const getselectOrderData = async (data) => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)
  let { code, rows, total } = await getselectOrderApi(params)
  if (code == 200) {
    // rows.map(v => {
    //     v.designDrawings = JSON.parse(v.designDrawings)
    // })
    financeTableData.value = rows
    totals.value = total
  }
}
// 分页器大小  当前分页器

const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit


  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...searchData.value
  }
  params.orderDate = null

  getselectOrderData(params)
}

// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}


const handleCalculateCost = async ({ i, v }) => {
  if (v.reimbursementAmount == null && v.billingAmount == null && v.paymentAmount == null) {
    proxy.$modal.msgWarning("请填写 '报账''开票''回款' 金额其中一个,才能保存填写的数据");
  } else {
    let params = {
      orderId: v.orderId,
      reimbursementAmount: v.reimbursementAmount ? v.reimbursementAmount : 0,
      reimbursementDifference: v.reimbursementAmount ? Number(v.totalOrderAmount) - v.reimbursementAmount : 0,
      billingAmount: v.billingAmount ? v.billingAmount : 0,
      billingDifference: v.billingAmount ? Number(v.totalOrderAmount) - v.billingAmount : 0,
      paymentAmount: v.paymentAmount ? v.paymentAmount : 0,
      paymentDifference: v.paymentAmount ? Number(v.totalOrderAmount) - v.paymentAmount : 0,
      remarkBilling: v.remarkBilling,
    }
    let { code, msg } = await updateOrderCaiWuApi(params)
    if (code == 200) {
      proxy.$modal.msgSuccess(msg);
    }
  }
  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...searchData.value
  }
  params.orderDate = null
  getselectOrderData(params)
}
let orderDateLte = ref(null)
let orderDateGte = ref(null)
let searchData = ref(null)
// 查找suppliersName
const onSearch = (v) => {
  orderDateLte.value = v.orderDate[0]
  orderDateGte.value = dayjs(v.orderDate[1]).subtract(1, 'second').format('YYYY-MM-DD HH:mm:ss')
  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...v
  }
  params.orderDate = null
  pageNum.value = 1
  searchData.value = v
  getselectOrderData(params)
}
// 导出
const openImportTable = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: 10000,
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...searchData.value
  }
  params.orderDate = null
  /** 导出按钮操作 */
  proxy.download("system/work/export", {
    ...params,
  }, `config_${new Date().getTime()}.xlsx`);


}
// 表单数据
onMounted(() => {
  getselectOrderData()
})

</script>
  
<style lang="scss" scoped>
.ticketsList {
  padding: 16px;

  .setcompanyOperations {
    label {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      line-height: 58px;
    }

    .btn-sub {
      width: 100%;
      text-align: center;
    }
  }
}
</style>